<template>
	<u-popup
		:customStyle="{ height: height, bottom: props.bottom || 0 }"
		:show="showPopup"
		@close="close"
		v-bind="attritions"
		:bgColor="bgColor"
		round="32rpx"
		:custom-style="customStyle"
	>
		<view class="popupTitle">
			<view class="fixedTitle" :style="{ color: fontColor, width: clientWidth + 'px' }">
				<view class="left"></view>
				<view class="middle">
					{{ title }}
				</view>
				<view class="right">
					<u-icon
						v-show="closeIcon"
						@click="close"
						class="close"
						name="close"
						:color="fontColor"
						size="20"
					></u-icon>
				</view>
			</view>
			<view class="area"></view>
		</view>
		<view :style="{ height: `calc(${height} - 112rpx)` }">
			<slot></slot>
		</view>
	</u-popup>
</template>

<script setup>
import { watch, ref, onMounted } from 'vue';
const props = defineProps({
	show: {
		type: Boolean,
		required: true,
		default: false
	},
	attritions: {
		type: Object,
		default: {}
	},
	title: {
		type: String,
		required: true,
		default: ''
	},
	closeIcon: {
		type: Boolean,
		default: true
	},
	bgColor: {
		type: String,
		default: '#fff'
	},
	fontColor: {
		type: String,
		default: '#0E0E0E'
	},
	height: {
		type: String,
		default: ''
	},
	bottom: {
		type: String,
		default: ''
	},
	customStyle: {
		type: Object,
		default: {}
	}
});
const emit = defineEmits(['closeCallback', 'update:show']);
const showPopup = ref(props.show);
const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().screenWidth;
const close = () => {
	showPopup.value = false;
	emit('update:show', false);
	emit('closeCallback');
};

watch(
	() => props.show,
	(newValue, oldValue) => {
		showPopup.value = newValue;
	},
	{
		immediate: true
	}
);
</script>

<style lang="scss">
.popupTitle {
	.area {
		height: 114rpx;
	}

	.fixedTitle {
		width: 100%;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 32rpx;
		padding: 40rpx 0;
		position: fixed;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left,
		.right {
			width: 100rpx;
			flex-shrink: 0;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			padding-right: 32rpx;
			box-sizing: border-box;
		}

		.middle {
			flex: 1;
			text-align: center;
		}
	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}
}
</style>
